<template>
    <div class="hore-add">
    <h3>添加英雄</h3>
    <hr>
    <form class="form-horizontal" @submit.prevent="addHore()">
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄名称</label>
        <div class="col-sm-10">
          <input v-model="horeForm.horeName" type="text" class="form-control" style="width:200px" />
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">英雄性别</label>
        <div class="col-sm-10">
          <input v-model="horeForm.gender" type="radio" value="男"> 男
          <input v-model="horeForm.gender" type="radio" value="女"> 女
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">添加</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
    data(){
        return {
            horeForm: {
                horeName: '',
                gender: '男'
            }
        }
    },
    methods:{
        // 添加英雄
        addHore(){
            // 进行校验
            if(!this.horeForm.horeName.trim()) return alert('输入英雄名称');
            this.$http.post('/hore',{
                ...this.horeForm,
                time:new Date()
            }).then(()=>{
                // 添加成功,跳转到英雄列表
                this.$router.push('/hore')
            })
        }
    }
}
</script>